<template>
  <el-dialog
    title="题目预览"
    :visible="showDialog"
    :close-on-press-escape="true"
    @close='showDialog2'
  >
    <el-row type="flex" justify="start">
      <span class="interval"> 【题型】: {{ previewData.questionType }}题 </span>
      <span class="interval"> 【编号】: {{ previewData.id }} </span>
      <span class="interval"> 【难度】: {{ previewData.difficulty }} </span>
      <span class="interval"> 【标签】: {{ previewData.tags }} </span>
    </el-row>
    <el-row type="flex" class="interval-wrap">
      <span class="interval"> 【学科】: {{ previewData.subjectName }} </span>
      <span class="interval"> 【目录】: {{ previewData.subjectID }} </span>
      <span class="interval"> 【方向】: {{ previewData.direction }} </span>
    </el-row>
    <hr />
    <el-row>
      <div>
        【题干】：
        <br />
        <br />
        <span style="color: blue">{{ previewData.question }}</span>
        <br />
        <br />
      </div>
      <div>
        {{ previewData.questionType }}题 选项：（以下选中的选项为正确答案）
        <div v-show="previewData.questionType == '单选'">
          <template>
            <el-radio-group v-model="radio">
              <div
                style="margin-top: 20px"
                v-for="(item, index) in previewData.options"
                :key="index"
              >
                <el-radio :label="item.isRight" :disabled='!item.isRight'>{{ item.code }}</el-radio>
              </div>
            </el-radio-group>
          </template>
        </div>
        <div v-show="previewData.questionType == '多选'">
          <template>
            <div
              style="margin-top: 20px"
              v-for="(item, index) in previewData.options"
              :key="index"
            >
              <el-checkbox v-model="checked" :disabled='!item.isRight' :label="item.isRight">{{
                item.code
              }}</el-checkbox>
            </div>
          </template>
        </div>
        <div v-show="previewData.questionType == '简答'">
          <!-- {{ previewData.options.isRight }} -->
        </div>
      </div>
    </el-row>
    <hr />
    <!-- 参考视频 -->
    <div class="reference">
      <el-row>
        【参考答案】 ：
        <el-button type="danger" @click="showVideo = true"
          >视频答案预览</el-button
        >
        <video  width="320" height="240" controls  v-if="showVideo">
          <source :src="previewData.videoURL" type="video/mp4">
      </video>
      </el-row>
    </div>
    <hr />
    <div class="analysis">【参考解析】 ：{{ previewData.answerID }}</div>
    <hr />
    <div>【题目备注】 ：{{ previewData.remarks }}</div>
    <el-row type="flex" justify="end">
      <el-button @click="showDialog2" type="primary">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      radio: 1,
      checked: [1],
      showVideo: false
    }
  },
  props: ['showDialog', 'previewData'],
  updated () {
    console.log(this.previewData)

    if (this.previewData.questionType == '1') {
      this.previewData.questionType = '单选'
    } else if (this.previewData.questionType == '2') {
      this.previewData.questionType = '多选'
    } else if (this.previewData.questionType == '3') {
      this.previewData.questionType = '简答'
    }
    if (this.previewData.difficulty == 1) {
      this.previewData.difficulty = '简单'
    } else if (this.previewData.difficulty == 2) {
      this.previewData.difficulty = '一般'
    } else {
      this.previewData.difficulty = '困难'
    }
    this.previewData.question = this.previewData.question.replace('<p>', ' ')
    this.previewData.question = this.previewData.question.replace('</p>', ' ')

    console.log(this.previewData.answerID)
  },
  methods: {
    showDialog2 () {
      this.$emit('showDialog2')
      this.showVideo = false
    }
  }
}
</script>

<style scoped>
.interval-wrap {
  margin-bottom: 20px;
}
.interval {
  width: 120px;
  margin-top: 20px;
  margin-right: 80px;
}
.analysis {
  margin: 20px 0;
}
video{
  display: block;
}
</style>
